<template>
  <div class="img-viewer-box">
    <el-image-viewer
      v-if="state.visible"
      :url-list="props.imgs"
      @close="close"
    />
  </div>
</template>
 
<script lang="ts" setup>
import { reactive,onMounted } from 'vue'
import { useVModel } from '@vueuse/core'
const props = defineProps<{
  modelValue: boolean
  imgs: string[]
}>()
const emits = defineEmits(["update:modelValue"])
const state = reactive({
  imgList: [],
  // 相当于是set 与 get
  visible: useVModel(props, 'modelValue', emits),
})
// 点击关闭的时候，连同小图一起关闭
function close() {
  state.visible = false
}
onMounted(()=>{
  console.log(props.imgs)
})
</script>
 
<style scoped></style>